<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- J D Eisenberg -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Rotate around a center point transformation</title>
  <link rel="stylesheet" type="text/css" href="../svg_style.css"/>
  <script type="text/javascript" src="../svg_utils.js"></script>
  <script type="text/javascript">
// <![CDATA[  
function redisplay()
{
  var rotate = document.getElementById("rotate").value;
  var cX = document.getElementById("cX").value;
  var cY = document.getElementById("cY").value;
  var attr = "rotate(" + rotate + "," + cX + "," + cY + ")";

  document.getElementById("transformed").setAttribute("transform",
    attr);
}

// ]]>
  </script>
</head>

<body onload="initElements(); redisplay()">

<div id="svgInput">
<div><pre id="svgSource">&lt;svg width="200px" height="200px" viewBox="0 0 200 200"&gt;
  &lt;!-- center of rotation --&gt;
  &lt;circle cx="50" cy="50" r="3" style="fill: black;"/&gt;

  &lt;!-- non-rotated arrow --&gt;
  &lt;g id="arrow" style="stroke: black;"&gt;
    &lt;line x1="60" y1="50" x2="90" y2="50"/&gt;
    &lt;polygon points="90 50, 85 45, 85 55"/&gt;
  &lt;/g&gt;

  &lt;!-- rotated around center point --&gt;
  &lt;use xlink:href="#arrow" transform="rotate(<input type="text"
    size="3" id="rotate" value="60" onchange="redisplay()"/>, <input size="3" type="text" id="cX" value="50" onchange="redisplay()"/>, <input size="3" type="text" id="cY" value="50" onchange="redisplay()"/>)"/&gt;
&lt;/svg&gt;</pre></div>
<div>
  <input type="checkbox" id="svgZoom" onclick="zoom()" /> Zoom
</div>
</div> <!-- svgInput-->

<div id="svgOutput" style="margin-top: 1em">
<svg width="200" height="200" viewBox="0 0 200 200"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- center of rotation -->
  <circle cx="50" cy="50" r="3" style="fill: black;"/>

  <!-- non-rotated arrow -->
  <g id="arrow" style="stroke: black;">
    <line x1="60" y1="50" x2="90" y2="50"/>
    <polygon points="90 50, 85 45, 85 55"/>
  </g>

  <!-- rotated around center point -->
  <use id="transformed" xlink:href="#arrow" transform="rotate(60, 50, 50)"/>
  
</svg>
</div>

</body>
</html>